<!-- components/navigation/ThemeToggle.vue -->
<template>
  <div class="theme-toggle">
    <el-tooltip
      :content="isDark ? '切换到浅色模式' : '切换到深色模式'"
      placement="bottom"
    >
      <el-button
        class="theme-toggle-btn"
        :icon="isDark ? Sunny : Moon"
        @click="toggleTheme"
        circle
      />
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { Sunny, Moon } from '@element-plus/icons-vue'

// 响应式数据
const isDark = ref(false)

// 方法
const toggleTheme = () => {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  // 保存主题偏好到本地存储
  localStorage.setItem('platform-admin-theme', isDark.value ? 'dark' : 'light')
}

// 生命周期
onMounted(() => {
  // 从本地存储恢复主题偏好
  const savedTheme = localStorage.getItem('platform-admin-theme')
  if (savedTheme) {
    isDark.value = savedTheme === 'dark'
    document.documentElement.classList.toggle('dark', isDark.value)
  } else {
    // 根据系统偏好设置主题
    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches
    document.documentElement.classList.toggle('dark', isDark.value)
  }
})
</script>

<style scoped>
.theme-toggle {
  display: flex;
  align-items: center;
}

.theme-toggle-btn {
  background: var(--header-bg, #ffffff);
  color: var(--header-text, #262626);
  border: 1px solid var(--border-color, #dcdfe6);
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  background: var(--user-dropdown-hover, #f5f5f5);
  color: var(--primary-color, #409eff);
  border-color: var(--primary-color, #409eff);
}
</style>